<script setup lang="ts">
import router from "@/router";
import pageTop from "@/components/pageTop.vue";
import { } from "@/network/api";
import { ref, onMounted, reactive } from "vue";
import { Pagination, Navigation, Autoplay, A11y, Grid } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";

const bannerList = ref() as any;
const menuList = ref() as any;
let platformData = reactive({
  count: 0,
  list: [] as any,
  page: 1,
  pageSize: 10,
});

const Data = reactive({
  category_id: Number,
  keywords: "",
  page: 1,
  pageSize: 10,
  activation: 1,
  PerView: 3,
  screenWidth: "" as any,
  slideList_t: [
    {
      id: 1,
      name: "国家高新技术产业开发区",
    },
    {
      id: 2,
      name: "国家级科技企业孵化器",
    },
    {
      id: 3,
      name: "国家电子信息产业基地",
    },
    {
      id: 4,
      name: "国家（惠州）视听产品产业园",
    },
    {
      id: 5,
      name: "国家新型工业化移动智能终端产业示范基地",
    },
    {
      id: 6,
      name: "国家知识产权示范园区",
    },
    {
      id: 7,
      name: "国家绿色工业园区",
    },
  ],
  slideList_b: [
    {
      text1: "珠三角国家自主",
      text2: "创新示范区",
    },
    {
      text1: "云计算智能终端创",
      text2: "新型产业集群",
    },
    {
      text1: "国家火炬计划LED",
      text2: "特色产业基地",
    },
    {
      text1: "国家通信高新技术",
      text2: "产业化基地",
    },
    {
      text1: "国家火炬计划数码视听",
      text2: "产业基地",
    },
    {
      text1: "国家火炬计划特色激光头",
      text2: "产业基地",
    },
    {
      text1: "中国检验检疫科学研究院（惠州）LED",
      text2: "产品技术中心",
    },
    {
      text1: "国家数码电子产品检测",
      text2: "重点实验室",
    },
    {
      text1: "国家级外贸转型升级基地",
      text2: "（电子信息）",
    },
    {
      text1: "中央外经贸提质",
      text2: "增效示范区",
    },
    {
      text1: "国家先进制造业集群",
      text2: "（超高清视频和智能家电）",
    },
    {
      text1: "国家级数字创意技术设备制造",
      text2: "创新型产业集群",
    },
  ],
});
if (document.body.clientWidth < 768) {
  Data.PerView = 1;
} else {
  Data.PerView = 3;
}

onMounted(() => {
  Data.screenWidth = document.body.clientWidth;
  window.onresize = () => {
    return (() => {
      if (document.body.clientWidth < 768) {
        Data.PerView = 1;
      } else {
        Data.PerView = 3;
      }
      Data.screenWidth = document.body.clientWidth;
    })();
  };
  console.log("onMounted", Data.screenWidth);
});
const handleGoDetail = (val: number) => {
  router.push({
    path: "/EcologyDetail",
    query: {
      id: val,
    },
  });
};

const handleSearch = (val: any) => {
  Data.keywords = val;
};

const handlClearKeyword = () => {
  Data.keywords = "";
};

const handleSelectPlat = (val: any) => {
  Data.page = 1;
  Data.category_id = val;
};

const PageChange = (page: number) => {
  Data.page = page;
};

const modules = [Navigation, Autoplay, A11y, Grid];

onMounted(() => { });
</script>

<template>
  <pageTop :name="'关于我们'" :text="'致力于打造领先的产业服务平台，助力企业发展。如您有需求，请联系我们'"></pageTop>

  <div class="bgfff">
    <div class="content">
      <div class="textBox textBox2">
        <div class="bigTitle text_center bigTitle1">发展历程</div>
        <div class="tetx">
          <div class="contentText contentTextIndent">
            仲恺高新区是1992年经国务院批准成立的全国首批56家国家级高新区之一，经过30余年发展，培育了TCL、
            德赛、亿纬锂能等本土知名企业，引进了全球30多个国家和地区的5000多家企业，已成为全国移动智能终端重要
            生产基地和配套产业集聚区、全球重要的高能环保电池生产基地，也是惠州万亿级电子信息产业集群核心引擎。
          </div>
        </div>

        <div class="secondTitle text_center" style="margin-bottom: 40px; margin-top: 60px">
          披荆斩棘开新路
        </div>
        <div class="tetx">
          <div class="contentText contentTextIndent">
            从面积8.8平方公里到345平方公里，仲恺高新区在持续的迭代过程中不断升级与完善。2001-2023年，仲恺
            高新区GDP从20亿元到1007亿元，增长50倍;规上工业总产值从165亿元到3249亿元，增长20倍。2023年，仲恺
            高新区以惠州市3%的土地面积，创造了惠州市18%的GDP、28%的规上工业总产值、约50%的规上电子信息总产值，在国家高新区综合排名第33位。
          </div>
        </div>
      </div>

      <el-row :gutter="52">
        <el-col :span="8" :xs="24">
          <div class="introduceBox">
            <div class="introduceImg scaleImgCard">
              <img src="https://huizhoueii.obs.cn-east-3.myhuaweicloud.com/introduce1.png" alt="" />
            </div>
            <div class="text">
              1993年3月9日，国家科委正式授予仲恺高新区“国家高新技术产业开发区”标牌，并举行授牌仪式
            </div>
          </div>
        </el-col>
        <el-col :span="8" :xs="24">
          <div class="introduceBox">
            <div class="introduceImg scaleImgCard">
              <img src="https://huizhoueii.obs.cn-east-3.myhuaweicloud.com/introduce2.png" alt="" />
            </div>
            <div class="text">
              1996年8月，位于仲恺高新区和畅路的仲恺高新 区管委会办公楼落成启用
            </div>
          </div>
        </el-col>
        <el-col :span="8" :xs="24">
          <div class="introduceBox">
            <div class="introduceImg scaleImgCard">
              <img src="https://huizhoueii.obs.cn-east-3.myhuaweicloud.com/introduce3.png" alt="" />
            </div>
            <div class="text">
              2010年2月26日，惠州市科技创新与产业园区建
              设暨仲恺高新区体制机制，改革创新工作启动大
              会，在陈江会议中心隆重举行。赋予仲恺高新区行
              使市一级经济管理权限和县(区)一级行政管理权
              限，扩大面积至345平方公里，形成“一区四园五 镇"格局
            </div>
          </div>
        </el-col>
      </el-row>

      <div class="textBox">
        <div class="secondTitle text_center" style="margin-bottom: 40px; margin-top: 60px">
          产业立本筑新区
        </div>
        <div class="tetx">
          <div class="contentText contentTextIndent">
            自成立以来，仲恺高新区主导产业经历了3次重要调整。1992年成立时，仲恺高新区确立了电子信息为主导产
            业，到2010年左右，基本形成了“4+1”新兴产业体系，2021年确立了构建“5+1”现代产业体系。从“来料加
            工”到“创新驱动”，仲恺高新区实现了从“加工者”到“制造者”的转变，并加速迈向“创造者”。
          </div>
        </div>
      </div>

      <div class="img2 scaleImgCard">
        <img src="https://huizhoueii.obs.cn-east-3.myhuaweicloud.com/introduce4.png" alt="" class="" />
      </div>

      <div class="textBox">
        <div class="tetx">
          <div class="contentText contentTextIndent">
            1992年刚成立时，仲恺高新区主打电子信息产业，拥有TTK(TCL前身)、惠阳地区工业公司(德赛集团前
            身)、中欧电子(德赛西威前身)等企业，为园区发展奠定基础。经过“十五”“十一五”期间的发展，华阳集
            团、亿纬锂能等一批本土企业相继成立，电子信息产业占全区经济规模的90%以上。2004年彩电、激光头、光盘
            驱动器等产品年产销量全国第一，手机产销量全国第二，被授予“国家电子信息产业基地”。
          </div>
        </div>
      </div>

      <el-row :gutter="62">
        <el-col :span="12" :xs="24">
          <div class="introduceBox introduceBox2">
            <div class="introduceImg scaleImgCard">
              <img src="https://huizhoueii.obs.cn-east-3.myhuaweicloud.com/introduce5.png" alt="" />
            </div>
            <div class="text">
              1993年6月8日,仲恺高新区首批入区工业项目用地签字仪式在惠州宾馆举行
            </div>
          </div>
        </el-col>
        <el-col :span="12" :xs="24">
          <div class="introduceBox introduceBox2">
            <div class="introduceImg scaleImgCard">
              <img src="https://huizhoueii.obs.cn-east-3.myhuaweicloud.com/introduce6.png" alt="" />
            </div>
            <div class="text">
              1996 年，惠州市最大的彩电生产基地TCL王牌生产基地举行奠基仪式
            </div>
          </div>
        </el-col>
        <el-col :span="12" :xs="24">
          <div class="introduceBox introduceBox2">
            <div class="introduceImg scaleImgCard">
              <img src="https://huizhoueii.obs.cn-east-3.myhuaweicloud.com/introduce7.png" alt="" />
            </div>
            <div class="text">
              2004年9月，西门子VDO工业园奠基动工，工业园占地面积10余万平方米，首期投资10亿元
            </div>
          </div>
        </el-col>
        <el-col :span="12" :xs="24">
          <div class="introduceBox introduceBox2">
            <div class="introduceImg scaleImgCard">
              <img src="https://huizhoueii.obs.cn-east-3.myhuaweicloud.com/introduce8.png" alt="" />
            </div>
            <div class="text">
              2007年，TCL集团在仲恺高新区举行液晶模组工厂破土动工仪式
            </div>
          </div>
        </el-col>
      </el-row>

      <div class="textBox textBox2">
        <div class="tetx">
          <div class="contentText contentTextIndent">
            2010年代，仲恺高新区主导产业升级为以平板显示、LED、移动互联网、新能源和云计算为主的“4+1”新兴 产业体系。“十二五”“十三五”期间，仲恺高新区引进了旭硝子、信利、康冠科技等显示企业，补齐了基板、面
            板等平板显示产业链关键环节，形成“基板-面板-模组-整机”的完整产业链；引进培育了亿纬锂能、德赛电池、拓邦电气等能源电子企业，成为全球重要的高能环保电池生产基地。同时，TCL、德赛、华阳、亿纬
            锂能等本土企业成长壮大，均位居全国乃至全球前列。
          </div>
        </div>
      </div>

      <el-row :gutter="62">
        <el-col :span="12" :xs="24">
          <div class="introduceBox introduceBox2">
            <div class="introduceImg scaleImgCard">
              <img src="https://huizhoueii.obs.cn-east-3.myhuaweicloud.com/introduce9.png" alt="" />
            </div>
            <div class="text">
              2016年11月25日，信利（惠州）智能显示有限公司4.5代AMOLED项目举行量产仪式，
              是全省首条量产的AMOLED面板线
            </div>
          </div>
        </el-col>
        <el-col :span="12" :xs="24">
          <div class="introduceBox introduceBox2">
            <div class="introduceImg scaleImgCard">
              <img src="https://huizhoueii.obs.cn-east-3.myhuaweicloud.com/introduce10.png" alt="" />
            </div>
            <div class="text">
              2017年8月24日，旭硝子第8.5代显示玻璃项目量产暨第11代显示玻璃项目动工仪式
              在仲恺高新区顺利举行
            </div>
          </div>
        </el-col>
      </el-row>

      <div class="textBox">
        <div class="tetx">
          <div class="contentText contentTextIndent">
            2021年，仲恺高新区确立构建“5+1”现代产业体系，将依托中韩(惠州)产业园起步区、广东(仲恺)人工
            智能产业园等国家级园区和千亿级战略发展平台，加快迈向千亿级国家一流高新区。当前，仲恺高新区已形成了智
            能终端、超高清视频显示和新能源三大支柱产业，液晶电视机、车载娱乐信息系统、锂电池的产量和市场份额，均
            位居全国乃至世界前列。“十四五”期间，仲恺高新区将朝着打造“具有全球竞争力的电子信息产业集群”的目标
            奋力前行。
          </div>
        </div>
      </div>

      <el-row :gutter="52">
        <el-col :span="8" :xs="24">
          <div class="introduceBox">
            <div class="introduceImg scaleImgCard">
              <img src="https://huizhoueii.obs.cn-east-3.myhuaweicloud.com/introduce11.png" alt="" />
            </div>
            <div class="text">
              2021年11月19日，全球最大的用户侧储能变流器供应商古瑞瓦特智慧能源电子产品项目签约
              落户
            </div>
          </div>
        </el-col>
        <el-col :span="8" :xs="24">
          <div class="introduceBox">
            <div class="introduceImg scaleImgCard">
              <img src="https://huizhoueii.obs.cn-east-3.myhuaweicloud.com/introduce12.png" alt="" />
            </div>
            <div class="text">
              2021年12月10日，仲恺高新区半导体显示产业链百亿投资启动暨惠州华星高世代模组扩产项目
              动工仪式举行
            </div>
          </div>
        </el-col>
        <el-col :span="8" :xs="24">
          <div class="introduceBox">
            <div class="introduceImg scaleImgCard">
              <img src="https://huizhoueii.obs.cn-east-3.myhuaweicloud.com/introduce13.png" alt="" />
            </div>
            <div class="text">
              2023年3月17日，惠州市推进高质量发展现场会（仲恺站）暨亿纬锂能三十、三十一工厂投产仪式在亿纬锂能潼湖基地圆满举行
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
  <div class="content text_center">
    <div class="bigTitle" style="margin: 75px 0">我们的荣誉</div>

    <swiper :modules="modules" :space-between="46" :navigation="{
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    }" :slidesPerView="Data.PerView" :loop="true" key="swiper1" :speed="2500" :autoplay="{
  delay: 0,
  stopOnLastSlide: false,
  disableOnInteraction: false,
}" :Grid="{
  fill: 'column',
  rows: 2,
}" :pagination="{ clickable: true }">
      <swiper-slide class="slide" v-for="item in Data.slideList_t" :key="item.id">
        <div class="introduceBox text_center">
          <div class="introduceImg scaleImgCard">
            <img v-if="item.id + 13 == 14" src="https://huizhoueii.obs.cn-east-3.myhuaweicloud.com/introduce14.png" />
            <img v-if="item.id + 13 == 15" src="https://huizhoueii.obs.cn-east-3.myhuaweicloud.com/introduce15.png" />
            <img v-if="item.id + 13 == 16" src="https://huizhoueii.obs.cn-east-3.myhuaweicloud.com/introduce16.png" />
            <img v-if="item.id + 13 == 17" src="https://huizhoueii.obs.cn-east-3.myhuaweicloud.com/introduce17.png" />
            <img v-if="item.id + 13 == 18" src="https://huizhoueii.obs.cn-east-3.myhuaweicloud.com/introduce18.png" />
            <img v-if="item.id + 13 == 19" src="https://huizhoueii.obs.cn-east-3.myhuaweicloud.com/introduce19.png" />
            <img v-if="item.id + 13 == 20" src="https://huizhoueii.obs.cn-east-3.myhuaweicloud.com/introduce20.png" />

          </div>
          <div class="contentText title3">{{ item.name }}</div>
        </div>
      </swiper-slide>
    </swiper>

    <swiper :modules="modules" :space-between="46" :navigation="{
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    }" :slidesPerView="Data.PerView" :loop="true" key="swiper2" dir="rtl" :speed="2500" :autoplay="{
  delay: 0,
  stopOnLastSlide: false,
  disableOnInteraction: false,
}" :Grid="{
  fill: 'column',
  rows: 2,
}" :pagination="{ clickable: true }">
      <swiper-slide class="slide" v-for="item in Data.slideList_b" :key="item.text1">
        <div class="introduceBox text_center">
          <div class="bgfff text3 contentText justify_center flex">
            <div>
              <div>{{ item.text1 }}</div>
              <div>{{ item.text2 }}</div>
            </div>
          </div>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<style lang="scss" scoped>
@import url("@/assets/css/content.css");

.contentTextIndent {
  text-indent: 2em;
}

.img2 {
  width: 849px;
  height: 452px;
  background: #f6f6f6;
  border-radius: 10px;
  margin: 53px auto 60px auto;
  overflow: hidden;

  img {
    width: 100%;
    height: 100%;
    // object-fit: cover;
  }
}

.textBox2 {
  margin-top: 0 !important;
}

.textBox {
  padding: 30px 105px;
  overflow: hidden;
  margin: 89px 0 0 0;

  .bigTitle {
    margin-bottom: 80px;
    margin-top: 75px;
  }
}

.btn1 {
  font-size: 18px;
  color: #fff;
  height: 43px;
  width: 130px;
}

.content {
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  padding-bottom: 30px;
}

.describe {
  padding: 78px 65px 78px 65px;
  text-indent: 2em;

  .textTop {
    margin-bottom: 20px;
  }
}

.introduceBox {
  .introduceImg {
    overflow: hidden;
    border-radius: 10px;
    height: 209px;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .text {
    margin-top: 23px;
    margin-bottom: 23px;
    font-size: 18px;
    color: $mainColor;
    text-align: initial;
  }

  .title3 {
    margin: 32px 0 65px 0;
  }

  .text3 {
    padding: 37px 0 40px 0;
    border-radius: 10px;
  }
}

.introduceBox2 {
  margin: 79px 0 0 0;

  .introduceImg {
    height: 330px !important;
  }
}

@media screen and (max-width: 450px) {
  .bigTitle1 {
    margin: 0 0 30px 0 !important;
  }

  .textBox {
    padding: 30px 0;

    .bigTitle {
      margin-bottom: 30px;
    }
  }

  .textBox2 {
    margin: 30px 0;
  }

  .img2 {
    width: 100%;
    height: 100%;
  }

  .introduceBox2 {
    .introduceImg {
      height: 220px !important;
    }
  }

  .introduceBox2 {
    margin: 0px 0 0 0;
  }
}
</style>
